/**
 * Created by 小敏哥 on 2017/12/6.
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';
import style from './index.scss';
import ItemList from '../../../../../../../../src/js/components/itemList';
import InputWithDelete from '../../../../../../../js/components/inputWithDelete';
import {getLicenseCity} from '../../../../actions/homeAction';
import AddressPicker from '../../../../../../../js/components/addressPicker';
import ItemWithRightArrow from '../../../../../../../js/components/itemWithRightArrow';

class InputContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            areaData: [],
            currentCity: '请选择考试城市'
        }
    }

    static propTypes = {
        examCityCallBack: React.PropTypes.func.isRequired,//考试城市回调
        driverNameCallBack: React.PropTypes.func.isRequired,//驾驶人姓名回调
        driverIdCardCallBack: React.PropTypes.func.isRequired,//驾驶人身份证回调
    };

    componentDidMount() {
        this.props.dispatch(getLicenseCity({}, (result) => {
            this.setState({
                areaData: result.areaMsgList,
            })
        }));
    }

    //构造地址
    filterAddress(array) {
        console.log(array);
        let result = '';
        for (let item of array) {
            result += (item!=array[0]?' ':'') + item.split(',')[0];
        }
        return result;
    }

    getAddress(cityArray) {
        let fullCity = this.filterAddress(cityArray);
        console.log(fullCity);
        this.setState({
            currentCity: fullCity
        });
        this.props.examCityCallBack({
            provinceCode: cityArray[0].split(',')[1],
            cityCode: cityArray[1].split(',')[1],
            fullCity: fullCity
        }, true);
    }

    render() {
        return <div className={style.inputContent}>
            <p className={style.title}><img src="./images/Rectangle 2.png"/> 驾驶证信息</p>
            <ItemList borderPaddingLeft="20px">
                <AddressPicker storageKey="examCity" colCount={2} regionData={this.state.areaData}
                               onChange={(cityArray) => {
                                   this.getAddress(cityArray);
                               }}>
                    <div className={style.cityPicker}>
                        <ItemWithRightArrow>
                            <div className={style.cityContent}>
                                <div>考试城市</div>
                                <div className={this.state.currentCity=='请选择考试城市'?style.empty:''}>{this.state.currentCity}</div>
                            </div>
                        </ItemWithRightArrow>
                    </div>
                </AddressPicker>
                <InputWithDelete storageKey="driverName" title="驾驶人姓名 " regular="^[\u4e00-\u9fa5]+$" maxLength={12}
                                 placeholder="请输入驾驶人姓名" errorCallBack={(value) => {
                    this.props.driverNameCallBack(value, false);
                }} currentCallBack={(value) => {
                    this.props.driverNameCallBack(value, true);
                }}/>
                <InputWithDelete storageKey="driverIdCard" title="身份证号 " maxLength={18} placeholder="请输入身份证号"
                                 regular="(^\d{14}(\d|X|x)$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)"
                                 onFocus={(e) => {
                                     window.scrollTo(0, 100);
                                 }}
                                 changeValue={(value) => {
                                     return value.toUpperCase();
                                 }}
                                 errorCallBack={(value) => {
                                     this.props.driverIdCardCallBack(value, false);
                                 }} currentCallBack={(value) => {
                    this.props.driverIdCardCallBack(value, true);
                }}/>
            </ItemList>
        </div>
    }
}

export default connect()(InputContent);